<template>
  <q-page padding>
    <div v-show="!init.isShowHtml">
      <div class="q-pa-sm">
        <div class="text-h6">新建文章</div>
      </div>
      <div class="q-my-md q-py-sm">
        <form class="q-form q-px-md full-width">
          <div class="row items-center q-mt-sm">
          <span class="col-sm-2 offset-md-2 col-xs-12 justify-end">
            <div class="q-item__label q-pr-lg ">文章类型:</div>
          </span>
            <span class="col-xl-4 col-md-5 col-sm-6 col-xs-12">
            <div class="q-item__label">
              <q-select :options="init.noteValueTypeOptions" outlined v-model="noteValueType">
              </q-select>
            </div>
          </span>
          </div>
          <div class="row items-center q-mt-sm">
          <span class="col-sm-2 offset-md-2 col-xs-12 justify-end">
            <div class="q-item__label q-pr-lg ">文章标题:</div>
          </span>
            <span class="col-xl-4 col-md-5 col-sm-6 col-xs-12">
            <div class="q-item__label">
                <q-input outlined v-model="noteTitle"/>
            </div>
          </span>
          </div>
          <div class="row items-center q-mt-sm">
          <span class="col-sm-2 offset-md-2 col-xs-12 justify-end">
            <div class="q-item__label q-pr-lg ">封面图:</div>
          </span>
            <span class="col-xl-4 col-md-5 col-sm-6 col-xs-12">
            <div class="q-item__label">
                 <q-uploader
                   :url="getUrl"
                   name="files"
                   @uploaded = 'uploadFinish'
                   extensions=".jpg,.jpeg,.png"
                   auto-upload
                   flat
                   bordered
                   style="max-width: 500px"
                 />
            </div>
          </span>
          </div>
          <div class="row items-center q-mt-sm">
          <span class="col-sm-2 offset-md-2 col-xs-12 justify-end">
            <div class="q-item__label q-pr-lg ">文章属性:</div>
          </span>
            <span class="col-xl-4 col-md-5 col-sm-6 col-xs-12">
            <div class="q-item__label">
               <q-option-group
                 :options=init.noteTypeOptions inline v-model="noteType"/>
            </div>
          </span>
          </div>
          <!--开始编辑-->
          <div class="row  " style="min-height: 500px">
            <q-tab-panels animated class="full-width " v-model="noteType">
              <!--文本-->
              <q-tab-panel name="text">
                <div>
                  <div class="q-pa-sm q-gutter-sm">
                    <!-- 配置富文本内容-->
                    <!-- toolbar 工具栏配置-->
                    <q-editor
                      v-model="quasarEditorContent"
                      :toolbar=init.quasarEditorConfig.toolbar
                      :fonts=init.quasarEditorConfig.fonts
                    />
                  </div>
                </div>
              </q-tab-panel>
              <!--富文本-->
              <q-tab-panel name="richText">
                <div>
                  <div class="q-pa-sm q-gutter-sm">
                    <quill-editor ref="myTextEditor" v-model="vueQuillEditorContent"
                                  :options="init.vueQuillEditorConfig.editorOption"></quill-editor>
                  </div>
                </div>
              </q-tab-panel>
              <!--链接-->
              <q-tab-panel name="link">
                <q-input outlined v-model="noteLink" label="文章链接:"/>
              </q-tab-panel>

            </q-tab-panels>
          </div>
        </form>

      </div>

    </div>
    <div v-show="init.isShowHtml">
      <div class="q-pa-sm">
        <div class="text-h6">预览效果</div>
      </div>
      <div class="q-my-md q-py-sm">
        <div v-show="this.noteType == 'text'">
          <div v-html="init.viewQuasarEditorContent"></div>
        </div>
        <div v-show="this.noteType == 'richText'">
          <div v-html="init.viewVueQuillEditorContent"></div>
        </div>
        <div v-show="this.noteType == 'link'">
          <div class="iframe-container" style="height: 1024px">
            <iframe width="100%"
                    height="100%"
                    :src="noteLink"
                    frameborder="0"
                    allowfullscreen>
            </iframe>
          </div>
        </div>
      </div>
    </div>

    <div class="row justify-center" style="width: 100%">
      <q-btn class="glossy q-mr-lg" color="primary" @click="saveNode" label="保存"/>
      <q-btn color="primary" v-show="!init.isShowHtml" outline @click="viewNode" label="预览"/>
      <q-btn color="primary" v-show="init.isShowHtml" outline @click="init.isShowHtml = false" label="返回编辑"/>
    </div>
  </q-page>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { quasarEditorConfigDefine, vueQuillEditorConfigDefine } from 'assets/js/addnode/editorConfig'

export default {
  // name: 'PageName',

  data () {
    return {
      init: {
        noteValueTypeOptions: ['随记', '游记', '学习', '前端'],
        noteTypeOptions: [
          { label: '文本', value: 'text' },
          { label: '富文本', value: 'richText' },
          { label: '链接', value: 'link' }
        ],
        quasarEditorConfig: quasarEditorConfigDefine,
        vueQuillEditorConfig: vueQuillEditorConfigDefine,
        viewVueQuillEditorContent: '',
        viewQuasarEditorContent: '',
        isShowHtml: false
      },
      noteType: 'text',
      vueQuillEditorContent: '',
      quasarEditorContent: '',
      noteLink: '',
      noteValueType: null,
      noteTitle: '',
      noteContent: null,
      mainFigureAddress: ''
    }
  },
  components: {
    quillEditor
  },
  methods: {
    saveNode () {
      this.noteContent = null
      console.log(this)
      console.log(this.viewVueQuillEditorContent)
      switch (this.noteType) {
        case 'text':
          this.noteContent = this.quasarEditorContent
          break
        case 'richText':
          this.noteContent = this.vueQuillEditorContent
          break
        case 'link':
          this.noteContent = this.noteLink
          break
        default:
          this.noteContent = null
      }
      if (!this.noteTitle) {
        this.$q.notify({
          position: 'center',
          type: 'negative',
          message: '请填写文章标题'
        })
        return
      }
      if (!this.noteValueType) {
        this.$q.notify({
          position: 'center',
          type: 'negative',
          message: '请填写文章类型'
        })
        return
      }
      if (!this.mainFigureAddress) {
        this.$q.notify({
          position: 'center',
          type: 'negative',
          message: '请上传主图'
        })
        return
      }
      if (!this.mainFigureAddress) {
        this.$q.notify({
          position: 'center',
          type: 'negative',
          message: '请上传文章封面'
        })
        return
      }
      if (!this.noteContent) {
        this.$q.notify({
          position: 'center',
          type: 'negative',
          message: '请填写文章内容'
        })
        return
      }
      var noteData = {
        title: this.noteTitle,
        noteValueType: this.noteValueType,
        noteType: this.noteType,
        mainFigureAddress: this.mainFigureAddress,
        noteContent: this.noteContent
      }
      console.log(noteData)
    },
    viewNode () {
      this.init.viewVueQuillEditorContent = this.vueQuillEditorContent
      this.init.viewQuasarEditorContent = this.quasarEditorContent
      this.init.isShowHtml = true
    },
    getUrl (files) {
      return 'http://127.0.0.1:7001/upload'
    },
    uploadFinish (info) {
      var resJson = JSON.parse(info.xhr.responseText)
      if (resJson.code === 200) {
        this.mainFigureAddress = resJson.data.fileSaveDir
      }
    }
  }
}
</script>
